<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="text-box" scroll-y="true">
				<text>{{text}}</text>
			</view>
			<view class="uni-btn-v">
				<button type="primary" :disabled="!canAdd" @click="add">add line</button>
				<button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
			</view>
		</view>
		<view class="box">
			<view class="box-item animated" hover-class="rubberBand" hover-stay-time="2000">1</view>
			<view class="box-item animated" hover-class="rubberBand" hover-stay-time="2000">2</view>
			<view class="box-item animated" hover-class="rubberBand" hover-stay-time="2000">3</view>
			<view class="box-item animated" hover-class="rubberBand" hover-stay-time="2000">4</view>
			<view class="box-item animated" hover-class="rubberBand" hover-stay-time="2000">5</view>
			<view class="box-item animated" hover-class="rubberBand" hover-stay-time="2000">6</view>
			<view class="box-item animated" hover-class="rubberBand" hover-stay-time="2000">7</view>
			<view class="box-item animated" hover-class="rubberBand" hover-stay-time="2000">8</view>
			<view class="box-item animated" hover-class="rubberBand" hover-stay-time="2000">9</view>
		</view>
		<view class="uni-container">
		<view class="uni-panel" v-for="(item, index) in list" :key="item.id">
		    <view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index)">
		        <text class="uni-panel-text">{{item.name}}</text>
		        <text class="uni-panel-icon uni-icon" :class="item.open ? 'uni-panel-icon-on' : ''">{{item.pages ? '&#xe581;' : '&#xe470;'}}</text>
		    </view>
		    <view class="uni-panel-c" v-if="item.open">
		        <view class="uni-navigate-item" v-for="(item2,key) in item.pages" :key="key" @click="goDetailPage(item2)">
		            <text class="uni-navigate-text">{{item2.name ? item2.name : item2}}</text>
		            <text class="uni-navigate-icon uni-icon">&#xe470;</text>
		        </view>
		    </view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				texts: [
					'HBuilder，500万开发者选择的IDE',
					'MUI，轻巧、漂亮的前端开源框架',
					'wap2app，M站快速转换原生体验的App',
					'5+Runtime，为HTML5插上原生的翅膀',
					'HBuilderX，轻巧、极速，极客编辑器',
					'uni-app，终极跨平台方案',
					'HBuilder，500万开发者选择的IDE',
					'MUI，轻巧、漂亮的前端开源框架',
					'wap2app，M站快速转换原生体验的App',
					'5+Runtime，为HTML5插上原生的翅膀',
					'HBuilderX，轻巧、极速，极客编辑器',
					'uni-app，终极跨平台方案',
					'......'
				],
				text: '',
				canAdd: true,
				canRemove: false,
				extraLine: [],
				list: [{
				        id: 'view',
				        name: '视图容器',
				        open: false,
				        pages: [
				            'view',
				            'scroll-view',
				            'swiper'
				            // #ifndef MP-TOUTIAO
				            ,
				            'movable-view',
				            'cover-view'
				            // #endif
				        ]
				    }, {
				        id: 'content',
				        name: '基础内容',
				        open: false,
				        pages: ['text', 'rich-text', 'progress']
				    }, {
				        id: 'form',
				        name: '表单组件',
				        open: false,
				        pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'picker-view', 'radio',
				            'slider',
				            'switch', 'textarea',
				            // #ifdef APP-PLUS || MP-WEIXIN || H5
				            'editor',
				            // #endif
				        ]
				    }, {
				        id: 'nav',
				        name: '导航',
				        open: false,
				        pages: ['navigator']
				    }, {
				        id: 'media',
				        name: '媒体组件',
				        open: false,
				        pages: [
				            'image',
				            'video',
				            // #ifndef MP-ALIPAY || MP-TOUTIAO
				            'audio',
				            // #endif
				        ],
				    },
				    // #ifndef MP-TOUTIAO
				    {
				        id: 'map',
				        name: '地图',
				        open: false,
				        pages: ['map']
				
				    },
				    // #endif
					// #ifndef QUICKAPP-WEBVIEW-UNION
				    {
				        id: 'canvas',
				        name: '画布',
				        open: false,
				        pages: ['canvas']
				    },
					// #endif
				    // #ifdef APP-PLUS || H5
				    {
				        id: 'web-view',
				        name: '网页',
				        open: false,
				        pages: [{
				            name: '网络网页',
				            url: '/pages/component/web-view/web-view'
				        }, {
				            name: '本地网页',
				            url: '/pages/component/web-view-local/web-view-local'
				        }]
				    },
				    // #endif
				    // #ifndef APP-PLUS || H5
				    {
				        id: 'web-view',
				        name: '网页',
				        open: false,
				        pages: ['web-view']
				    },
				    // #endif
				    // #ifndef H5 || MP-BAIDU || QUICKAPP-WEBVIEW
				    {
				        url: 'ad',
				        name: 'AD组件',
				        open: false
				    },
				    // #endif
				]
			}
		},
		methods: {
			add: function(e) {
				this.extraLine.push(this.texts[this.extraLine.length % 12]);
				this.text = this.extraLine.join('\n');
				this.canAdd = this.extraLine.length < 12;
				this.canRemove = this.extraLine.length > 0;
			},
			remove: function(e) {
				if (this.extraLine.length > 0) {
					this.extraLine.pop();
					this.text = this.extraLine.join('\n');
					this.canAdd = this.extraLine.length < 12;
					this.canRemove = this.extraLine.length > 0;
				}
			}
		},
		onShareAppMessage() {
		    return {
		        title: '欢迎体验uni-app',
		        path: '/pages/tabBar/component/component'
		    }
		},
		onNavigationBarButtonTap(e) {
		    uni.navigateTo({
		        url: '/pages/about/about'
		    });
		},
		methods: {
		    triggerCollapse(e) {
		        if (!this.list[e].pages) {
		            this.goDetailPage(this.list[e].url);
		            return;
		        }
		        for (var i = 0; i < this.list.length; ++i) {
		            if (e === i) {
		                this.list[i].open = !this.list[e].open;
		            } else {
		                this.list[i].open = false;
		            }
		        }
		    },
		    goDetailPage(e) {
		        if (typeof e === 'string') {
		            uni.navigateTo({
		                url: '/pages/component/' + e + '/' + e
		            })
		        } else {
		            uni.navigateTo({
		                url: e.url
		            })
		        }
		    }
		}
	}
</script>

<style>
	@import '../../common/animate.min.css';
	@import '../../common/uni.css';
	@import '../../common/uni-nvue.css';
	.text-box {
		text-align: center;
	}

	.view-box {
		width: 80rpx;
		height: 80rpx;
		background: #ffddfd;
		margin: 80rpx;
	}

	.view-box-hover {
		background: #00FF00;
	}

	.box {
		width: 100%;
		height: auto;
		background: #DDAAFF;
		color: white;
		display: flex;
		flex-wrap: wrap;
		border: 2rpx solid #FF3333;
		flex-direction: initial;
		justify-content: space-around;
		align-items: center;
	}

	.box-item {
		margin: 20rpx;
		width: 200rpx;
		height: 200rpx;
		background: #007AFF;
		line-height: 200rpx;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
	}

	.box-item:nth-of-type(odd) {
		background: #007AFF;
		border-radius: 100%;
	}

	.box-item:nth-of-type(even) {
		background: #00FF7A;
	}
</style>
